<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>TodoList</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src='js/jquery-3.2.0.min.js'></script>
	<script src='js/bootstrap.min.js'></script>
	<script src='js/vue1.0.js'></script>
	
	<script>
		 
				  $(function(){

				  	        var vm=new Vue({
				  	        	 el:'.container',
				  	        	 data:{
                                        myData:[],
                                         username:'5',
                                         userage:'5',
                                         nowIndex:'',
                                         title:'',
				  	        	 },
				  	        	 methods:{
		                                       add:function(){
		                                       	   this.myData.push({name:this.username,age:this.userage});
		                                       	   this.username='';
		                                       	   this.userage='';
		                                       },
		                                       del:function(n){
					                                       	if(n==-2){
					                                            this.myData=[];
                                                               
					                                       	}else{
                                                                
					                                            this.myData.splice(n,1);
					                                       	  }
		                                       	}

                                       	
                                       
                                      
				  	        	 }
				  	        })
				  })
	</script>
	
	<style>
		  .container{

		    	
		  }
	</style>
</head>
<body>
	   <div class="container">

	   	       <form role='form' class="form-horizontal">
	   	       	   <div class="form-group">
	   	       	   	   <label for="username">用户名：</label>
	   	       	   	   <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model='username'>
	   	       	   </div>
	   	       	   <div class="form-group">
	   	       	   	   <label for="userage">年龄：</label>
	   	       	   	   <input type="text" id="userage" class="form-control" placeholder="请输入年龄" v-model='userage'>
	   	       	   </div>
   	       	   	   <div class="form-group">
   	       	   	   	     <input type="button" value="添加" class="btn btn-success" @click='add()'>
   	       	   	   	     <input type="button" value="重置" class="btn btn-primary">
   	       	   	   </div>
	   	       	   
	   	       </form>
	   	       <hr>
	   	       <table class="table " >
	   	       	   <caption class="h2 text-info text-center">用户信息表</caption>
	   	           <tr>
	   	           	   <th class="text-center">序号</th>
	   	           	   <th class="text-center">名字</th>
	   	           	   <th class="text-center">年龄</th>
	   	           	   <th class="text-center">操作</th>
	   	           </tr>

	   	           <tr class="text-center" v-for='item in myData'>
	   	                
		   	           	<td>{{$index}}</td>
		   	           	<td>{{item.name}}</td>
		   	           	<td>{{item.age}}</td>
		   	           	<td><button class="btn btn-info btn-sm" data-toggle='modal' data-target='#myModal' @click="nowIndex=$index,title='确认删除这条数据吗？'">删除</button></td>
	   	           </tr>
	   	          
	   	           <tr v-show='myData.length!=0'>
		   	           	<td colspan="4">
		   	           		 <button class="btn btn-danger btn-sm" data-toggle='modal' data-target='#myModal' @click="nowIndex=-2,title='确认删除全部数据吗？'">删除全部</button>
		   	           	</td>
	   	           </tr>
	   	           <tr class="text-center"  v-show='myData.length==0'>
		   	           	<td colspan="4" class='text-info'>
		   	           		<p>暂无数据</p>
		   	           	</td>
	   	           </tr>
	   	       </table>
                     <!-- 模态框 -->
	   	       <div class="modal fade col-lg-offset-3 col-lg-6" id="myModal" role="dialog"  data-index={{nowIndex}} >
	   	       	     <div class='modal-content'>
	   	       	     	    <div class="modal-header">
	   	       	     	          <button  class="close" data-dismiss="modal">
	   	       	     	          	   <span>&times</span>
	   	       	     	          </button>	
	   	       	     	    	  <h4 class="modal-title">{{title}}</h4>
	   	       	     	    </div>
	   	       	     	    <div>
	   	       	     	    <div class="modal-body text-right">

	   	       	     	    	    <button class="btn btn-primary btn-sm" data-dismiss="modal">取消 </button>	
	   	       	     	    	    <button class="btn btn-success btn-sm" data-dismiss="modal" @click='del(nowIndex)'>确认删除</button>
	   	       	     	    </div>
	   	       	     	    </div>
	   	       	     </div>
	   	       </div>
	   </div>

				 

</body>
</html>